<template>
  <div id="top">
    <div class="nav">
      <p>Anndy的博客</p>
      <ul class="ul1 clearfix">
        <li @click="index">主页</li>
        <li @click="index">我的博客</li>
        <li @click="mine">关于我</li>
        <li @click="phone">联系我</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return {
        title:''
      }
    },
    methods:{
      index:function(){
        this.$router.push("/index");
      },
      mine:function(){
        this.$router.push('/mine');
      },
      phone:function(){
        this.$router.push('/phone');
      }
    }
  }
</script>

<style>

  @import  '../../css/common.css';
  body{
    padding-top:15px;
    /*background-color: #f8d69b;*/
    background-color: rgba(248,214,155,0.5);
  }
  .nav{
    width:100%;
    height:200px;
    background:url('../../assets/sd.jpg');
    background-position: 350px 280px;
    padding:20px;
    margin-bottom: 20px;
  }
  p{
    font-size:40px;
    line-height:70px;
  }
  .ul1{
    padding-top:30px;
    width:80%;
  }
  .ul1 li{
    float:left;
    width:25%;
    height:30px;
    color:black;
    font-size:20px;
    text-align: center;
  }
  .ul1 li:hover{

  }
</style>
